import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Effects

Item {
    id: root
    width: 800
    height: 1000

    Theme { id: theme }

    // 数值与样式属性
    property real value: 35.0
    property real minValue: 0
    property real maxValue: 100
    property real stepSize: 1
    property string icon: ""
    property string unit: "°C"
    property string title: "当前温度"
    property string setTitle: "设定温度: "

    // 角度与进度
    property real startAngleDeg: -120
    property real spanAngleDeg: 240
    property real progress: (value - minValue) / (maxValue - minValue)

    signal valueModified(real newValue)

    // 背景
    Rectangle {
        id: knobBackground
        anchors.top: parent.top
        anchors.horizontalCenter: parent.horizontalCenter
        width: Math.min(parent.width * 0.92, 720)
        height: width
        radius: width / 2
        color: "transparent"

        Image {
            z: 1
            id: knobBackgroundContent
            anchors.fill: parent
            source: "qrc:/assets/tempbg.png"
            fillMode: Image.PreserveAspectFit
            smooth: true
        }



        // 中心数值与单位
        Rectangle {
            z: 2
            id: centerCircle
            anchors.centerIn: parent
            width: parent.width
            height: width
            color: "transparent"

            Column {
                anchors.centerIn: parent
                anchors.verticalCenterOffset: 54
                width: 300
                spacing: 16

                Text { text: icon; color: "#00c2c7"; font.pixelSize: 36; anchors.horizontalCenter: parent.horizontalCenter }

                Item {
                    id: editContainer
                    width: 200
                    height: 100
                    anchors.horizontalCenter: parent.horizontalCenter
                    property bool isEditing: false

                    Row {
                        anchors.centerIn: parent
                        spacing: 8

                        Text {
                            id: valueDisplay
                            text: value.toFixed(2)
                            font.pixelSize: 80
                            font.bold: true
                            color: "#333"
                            visible: !editContainer.isEditing
                            MouseArea {
                                anchors.fill: parent
                                onClicked: {
                                    editContainer.isEditing = true
                                    centerValueInput.text = value.toFixed(0)
                                    centerValueInput.forceActiveFocus()
                                    centerValueInput.selectAll()
                                }
                            }
                        }

                        Rectangle {
                            id: inputBackground
                            width: 180
                            height: 80
                            visible: editContainer.isEditing
                            color: "transparent"
                            Image { anchors.fill: parent; source: "qrc:/assets/jbinput.png"; fillMode: Image.Stretch }

                            TextInput {
                                id: centerValueInput
                                anchors.centerIn: parent
                                width: parent.width - 20
                                height: parent.height - 10
                                font.pixelSize: 60
                                font.bold: true
                                color: "#178FCD"
                                horizontalAlignment: TextInput.AlignHCenter
                                verticalAlignment: TextInput.AlignVCenter
                                validator: DoubleValidator { bottom: root.minValue; top: root.maxValue; decimals: 0 }
                                onAccepted: {
                                    var newValue = parseFloat(text)
                                    if (!isNaN(newValue)) { root.value = Math.max(root.minValue, Math.min(root.maxValue, newValue)); root.valueModified(root.value) }
                                    editContainer.isEditing = false
                                }
                                Keys.onEscapePressed: { editContainer.isEditing = false }
                                onActiveFocusChanged: { if (!activeFocus) editContainer.isEditing = false }
                            }
                        }

                        Text { id: unitLabel; text: unit; font.pixelSize: 26; color: "#666"; anchors.verticalCenter: parent.verticalCenter }
                    }
                }

                Text { text: title; font.pixelSize: 26; color: "#666"; anchors.horizontalCenter: parent.horizontalCenter }
            }
        }
    }

    // 控制区域
    Rectangle {
        id: controlArea
        anchors.top: knobBackground.bottom
        anchors.topMargin: 20
        anchors.horizontalCenter: parent.horizontalCenter
        width: knobBackground.width
        height: 140
        radius: 60
        color: "transparent"
    
        Image {
            id: controlBg
            anchors.centerIn: parent
            width: 560
            height: 150
            source: "qrc:/assets/Controlsbglong.png"
            smooth: true
        }
    
        // 当前数值
        Row {
            id: controlValueRow
            anchors.centerIn: controlBg
            spacing: 20

            Text {
                text: root.setTitle
                font.pixelSize: 32
                color: '#525252'
                verticalAlignment: Text.AlignVCenter
            }

            Text {
                text: root.value.toFixed(2)
                font.pixelSize: 42
                font.bold: true
                color: '#525252'
                verticalAlignment: Text.AlignVCenter
            }

            Text {
                text: "°c"
                font.pixelSize: 28
                color: '#525252'
                verticalAlignment: Text.AlignVCenter
            }
        }
    
        // 减
        Image {
            id: tempMinus
            source: "qrc:/assets/temp-.png"
            width: 130
            height: 90
            anchors.verticalCenter: controlBg.verticalCenter
            anchors.right: controlBg.left
            anchors.rightMargin: 40
            smooth: true
            property real baseScale: 1.0
            scale: baseScale
            Behavior on scale { NumberAnimation { duration: 120; easing.type: Easing.OutQuad } }
            MouseArea {
                anchors.fill: parent
                onPressed: tempMinus.baseScale = 0.9
                onReleased: tempMinus.baseScale = 1.0
                onClicked: {
                    var newValue = Math.max(root.minValue, root.value - root.stepSize)
                    if (newValue !== root.value) { root.value = newValue; root.valueModified(root.value) }
                }
            }
        }
    
        // 加
        Image {
            id: tempPlus
            source: "qrc:/assets/temp+.png"
            width: 130
            height: 90
            anchors.verticalCenter: controlBg.verticalCenter
            anchors.left: controlBg.right
            anchors.leftMargin: 40
            smooth: true
            property real baseScale: 1.0
            scale: baseScale
            Behavior on scale { NumberAnimation { duration: 120; easing.type: Easing.OutQuad } }
            MouseArea {
                anchors.fill: parent
                onPressed: tempPlus.baseScale = 0.9
                onReleased: tempPlus.baseScale = 1.0
                onClicked: {
                    var newValue = Math.min(root.maxValue, root.value + root.stepSize)
                    if (newValue !== root.value) { root.value = newValue; root.valueModified(root.value) }
                }
            }
        }
    }
}
